<html>
<head>

	<link rel="stylesheet" href="css/flexslider.css" type="text/css" media="screen" />
	<link rel="stylesheet" href="css/slides.css" type="text/css" media="screen" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="js/libs/flexslider/jquery.flexslider-min.js"></script>
	<title>Valto Live Event</title>
	
</head>
<body>
<p><br/><br/></p>
	<div id="allWindow">
	 	<div id="container">
	 		<div class="flexslider">
				<ul id="slidesset" class="slides" />
			</div>
		</div>
	</div>
 

	<script>

function toISODateString(d){
	function pad(n){return n<10 ? '0'+n : n}
	return d.getUTCFullYear()+'-' + pad(d.getUTCMonth()+1)+'-'
      + pad(d.getUTCDate())+'T' + pad(d.getUTCHours())+':'
      + pad(d.getUTCMinutes())+':' + pad(d.getUTCSeconds())
}
	
function getQueryVariable(variable) {
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i = 0; i < vars.length; i++) {
		var pair = vars[i].split("=");
		if (pair[0] == variable) {
			return unescape(pair[1]);
		}
	}
	alert('Query Variable ' + variable + ' not found');
}

function getRoughStringForTimeDiff(timeDiff) {
	sec = Math.floor(timeDiff / 1000);
	min = Math.floor(sec / 60);
	hr = Math.floor(min / 60);
	days = Math.floor(hr / 24);
	
	if (days > 0){
		return days + " days ago";
	}
	else if (hr > 0){
		return hr + " hours ago";
	}
	else if (min > 0){
		return min + " minutes ago";
	}
	else {
		return sec + " seconds ago";
	}
}

Array.prototype.max = function() {
	var max = this[0];
	var len = this.length;
	for (var i = 1; i < len; i++) if (this[i] > max) max = this[i];
	return max;
}

Array.prototype.min = function() {
	var min = this[0];
	var len = this.length;
	for (var i = 1; i < len; i++) if (this[i] < min) min = this[i];
	return min;
}


$(window).resize();

var dates = [], newestPhotoDate = new Date("July 21, 1980");
var maxItems = 20;
var currentItems = 0;

function updateSlidesToRecent() {
	currentItems = 0;
	$.ajax(
		{
			url: '/event/' + getQueryVariable('id'),
			type: 'get',
			dataType: 'json',
			data: { maximum_items: maxItems, from_date: toISODateString(new Date()), order: 'recent' },
			success: function(data) {
				
				$.each(data.recentItems, function(i,item){					
					photoDate = Date.parse(item.date.substring(1, item.date.length - 2));
					
					elapsed = Date.now() - photoDate;
				
					$("#photo"+currentItems).attr("src", item.photo);
					$("#comment"+currentItems).text(item.comment + " - Posted by " + item.name + ", " + getRoughStringForTimeDiff(elapsed) + ".");
					
					currentItems++;
					dates.push(photoDate);
				});
				
				newestPhotoDate = dates.max();
				
				for (i = currentItems;i < maxItems; i++) {
					$("#photo"+currentItems).attr("src", "");
					$("#comment"+currentItems).text("");
				}
			} 
		}		
	);
}

function createSlidesForRecentItems() {
	currentItems = 0;
	$.ajax(
		{
			url: '/event/' + getQueryVariable('id'),
			type: 'get',
			dataType: 'json',
			data: { maximum_items: maxItems, from_date: toISODateString(new Date()), order: 'recent' },
			success: function(data) {
				$("#slidesset").empty();
			
				$.each(data.recentItems, function(i,item){
					photoDate = Date.parse(item.date.substring(1, item.date.length - 2));
					if (photoDate < newestPhotoDate) return;
					
					elapsed = Date.now() - photoDate;
				
					$("<li/>").attr("id", "item"+currentItems).attr("class", "item").appendTo("#slidesset");
					$("<a/>").attr("id", "a"+currentItems).attr("class", "advance-link").text(" ").appendTo("#item"+currentItems);
					$("<img/>").attr("style", "vertical-align: middle;").attr("src", item.photo).attr("id", "photo"+currentItems).appendTo("#a"+currentItems);
					$("<p/>").attr("class", "flex-caption").text(item.comment + " - Posted by " + item.name + ", " + getRoughStringForTimeDiff(elapsed) + ".").attr("id", "comment"+currentItems).appendTo("#item"+currentItems);
					
					currentItems++;
					dates.push(photoDate);
				});
				
				newestPhotoDate = dates.max();

				for (i = currentItems;i < maxItems; i++) {
					$("<li/>").attr("id", "item"+i).attr("class", "item").appendTo("#slidesset");
					$("<a/>").attr("id", "a"+i).attr("class", "advance-link").text(" ").appendTo("#item"+i);
					$("<img/>").attr("style", "vertical-align: middle;").attr("src", "dummy.jpg").attr("id", "photo"+i).appendTo("#a"+i);
					$("<p/>").attr("class", "flex-caption").text("dummy").attr("id", "comment"+i).appendTo("#item"+i);
				}
				
				$('.flexslider').flexslider({
				  animation: "slide",
				  controlsContainer: ".flexslider-container",
				  slideshowSpeed: 8000,
				  after: function(slider) {
					if (slider.currentSlide == currentItems - 1) {
						slider.currentSlide = -1;
						updateSlidesToRecent();
					}
				  }
			  });
			}
		}	
	);
}

createSlidesForRecentItems()


	</script>
</body>
</html>